<template>
  <div class="app-container">
    <div class="app-container-flex">
      <div class="left-container">
        <div class="left-container-header border-style-bottom">
          <!-- 机构树 -->
          <el-button
            :plain="true"
            v-if="$permission('faultLibraryManager:add')"
            :disabled="addBtn"
            @click="addOrg"
            >新增</el-button
          >
          <el-button
            v-if="$permission('faultLibraryManager:del')"
            :plain="true"
            :disabled="!canDelete"
            @click="delDept"
            >删除</el-button
          >
          <el-button
            v-if="$permission('faultLibraryManager:downloadTemplate')"
            :plain="true"
            @click="downloadTemplate('fault_classify_library')"
            >下载模板</el-button
          >
          <el-upload
            v-if="$permission('faultLibraryManager:upload')"
            :headers="uploadInfo.headers"
            :show-file-list="false"
            :on-error="uploadError"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload"
            :action="uploadInfo.action"
          >
            <el-button>导入</el-button>
          </el-upload>
          <el-button
            v-if="proxy.$permission('faultLibraryManager:excelList')"
            :plain="true"
            @click="exportClassificationExcel()"
            >导出</el-button
          >
        </div>
        <div class="left-container-header border-style-bottom">
          <el-input
            v-model="treeInfo.query.keyword"
            style="flex: 1; margin-right: 10px"
            :clearable="true"
            placeholder="请输入类别名称/编码"
            @keyup.enter.native="init"
          ></el-input>
          <el-button @click="init">搜索</el-button>
        </div>
        <div class="left-container-main main-flex">
          <el-tree
            ref="menuTree"
            :data="treeInfo.data"
            highlight-current
            :props="treeInfo.defaultProps"
            node-key="id"
            :default-checked-keys="[treeInfo.checked]"
            :default-expand-all="true"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
          />
        </div>
      </div>
      <div class="right-container">
        <div v-if="showDeptSubmitBox" class="layui-card-body">
          <!-- 类别 -->
          <div class="layui-btn-container border-style-bottom">
            <el-button :plain="true" :disabled="saveBtn" @click="updateOrg"
              >保存</el-button
            >
          </div>
          <div>
            <page-form
              class="paddingBox order-model-formBox flex_wrap_start_start"
              v-model:ref-obj="formOrgInfo.ref"
              :data="formOrgInfo.data"
              :field-list="formOrgInfo.fieldList"
              :rules="formOrgInfo.rules"
              :label-width="formOrgInfo.labelWidth"
            >
            </page-form>
          </div>
        </div>
        <!-- 故障 -->
        <div v-if="UserBox" class="layui-card-body">
          <div class="opt-header border-style-bottom">
            <page-filter
              v-model:query="filterInfo.query"
              :filter-list="filterInfo.list"
            >
              <template
                v-if="$permission('faultLibraryManager:add')"
                v-slot:filter-addUser
              >
                <el-button :disabled="currentDeptId <= 0" @click="addUser"
                  >新增</el-button
                >
              </template>
              <template
                v-if="$permission('faultLibraryManager:del')"
                v-slot:filter-btnDelete
              >
                <el-button
                  :disabled="!tableInfo.selections.length"
                  @click="del()"
                  >删除</el-button
                >
              </template>
              <template v-slot:filter-classifyTypeValue>
                <el-input
                  v-model="filterInfo.query.classifyTypeValue"
                  type="input"
                  :disabled="true"
                  placeholder="请选择资产分类"
                >
                  <template #append>
                    <el-icon @click="openAssetClassifyWindowFilter"
                      ><MoreFilled
                    /></el-icon>
                  </template>
                </el-input>
              </template>
            </page-filter>
          </div>
          <table-container
            :refresh="tableInfo.refresh"
            :init-curpage="tableInfo.initCurpage"
            v-model:data="tableInfo.data"
            :api="tableInfo.api"
            :query="filterInfo.query"
            :field-list="tableInfo.fieldList"
            :handle="tableInfo.handle"
            @handleEvent="handleEvent"
          >
          </table-container>
        </div>
      </div>
      <!-- 新增修改表格 -->
      <page-dialog
        v-if="tableDialogInfo.visible"
        :title="tableDialogInfo.title[tableDialogInfo.type]"
        v-model:visible="tableDialogInfo.visible"
        :width="tableDialogInfo.width"
        :bt-loading="tableDialogInfo.btLoading"
        :bt-list="tableDialogInfo.btList"
      >
        <!-- form -->
        <page-form
          class="paddingBox order-model-formBox flex_wrap_start_start"
          v-model:ref-obj="tableDialogForm.ref"
          :data="tableDialogForm.data"
          :field-list="tableDialogForm.fieldList"
          :rules="tableDialogForm.rules"
          :label-width="tableDialogForm.labelWidth"
        >
          <template v-slot:form-classifyTypeValue>
            <el-input
              v-model="tableDialogForm.data.classifyTypeValue"
              type="input"
              :disabled="true"
              placeholder="请选择资产分类"
            >
              <template #append>
                <el-icon @click="openAssetClassifyWindow"
                  ><MoreFilled
                /></el-icon>
              </template>
            </el-input>
          </template>
        </page-form>
      </page-dialog>

      <!---新增tree--->
      <page-dialog
        v-if="treeModifyInfo.visible"
        :title="treeModifyInfo.title"
        v-model:visible="treeModifyInfo.visible"
        :width="treeModifyInfo.width"
        :bt-list="treeModifyInfo.btList"
      >
        <page-form
          class="paddingBox order-model-formBox flex_wrap_start_start"
          v-model:ref-obj="formOrgInfo.ref"
          :data="formOrgInfo.modifyData"
          :field-list="formOrgInfo.modifyFieldList"
          :rules="formOrgInfo.rules"
          :label-width="formOrgInfo.labelWidth"
        >
          <template v-slot:form-isCreateDepotTemp>
            <el-checkbox
              :disabled="formOrgInfo.modifyData.status === 0"
              v-model="formOrgInfo.modifyData.isCreateDepotTemp"
            ></el-checkbox>
          </template>
        </page-form>
      </page-dialog>
    </div>
    <SelectAssetClassify
      v-if="selectAssetClassifyInfo.visible"
      v-model:showDialog="selectAssetClassifyInfo.visible"
      :saveEmpty="true"
      :check-box="false"
      :highlight-row="true"
      @callback="selectAssetClassifyInfoCallBack"
    />
    <SelectAssetClassify
      v-if="selectAssetClassifyInfoFilter.visible"
      v-model:showDialog="selectAssetClassifyInfoFilter.visible"
      :saveEmpty="true"
      :check-box="false"
      :highlight-row="true"
      @callback="selectAssetClassifyInfoCallBackFilter"
    />
  </div>
</template>

<script setup name="faultLibraryManager">
import {
  getFaultLibraryPage,
  getFaultClassifyTree,
  addSettingsFaultClassify,
  updateSettingsFaultClassify,
  updateSettingsFaultLibrary,
  addSettingsFaultLibrary,
  getSettingsFaultClassify,
  deleteSettingsFaultLibrary,
  deleteSettingsFaultClassify,
  excelFaultClassify,
} from "@/api/repair";
import { ElLoading } from "element-plus";
import _ from "lodash";
import { exportTemplateExcel } from "@/api/pub";

const { proxy } = getCurrentInstance();

const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);
const uploadInfo = ref({
  action: baseUrl.value + "/repair/settings/faultClassify/import/excel",
  headers: {
    Authorization: proxy.$store.state.user.token,
  },
  loading: {},
});
const addBtn = ref(true); //控制左侧树节点上方新增按钮状态
const saveBtn = ref(true);
const selectAssetClassifyInfo = reactive({
  visible: false,
  saveEmpty: true,
  query: {},
});
const selectAssetClassifyInfoFilter = reactive({
  visible: false,
  saveEmpty: true,
  query: {},
});
// 权限树
const treeInfo = ref({
  data: [],
  nodeKey: "code",
  checked: [],
  defaultProps: {
    children: "children",
    label: "name",
  },
  selectNode: {},
  query: {
    keyword: "",
  },
});
const formOrgInfo = ref({
  ref: null,
  data: {},
  modifyData: {},
  labelWidth: "120px",
  fieldList: [
    {
      label: "类别名称",
      value: "name",
      type: "input",
      maxlength: 200,
    },
    {
      label: "类别编码",
      value: "code",
      type: "input",
      maxlength: 32,
    },
  ],
  modifyFieldList: [
    {
      label: "类别名称",
      value: "name",
      type: "input",
      maxlength: 200,
    },
    {
      label: "类别编码",
      value: "code",
      type: "input",
      maxlength: 32,
    },
  ],
  rules: {
    code: [
      { required: true, message: "请输入类别编码", trigger: "blur" },
      { validator: proxy.$validate.validatEn, trigger: "blur" },
    ],
    name: [{ required: true, message: "请输入类别名称", trigger: "blur" }],
  },
});
// 过滤相关配置
const filterInfo = ref({
  query: {
    classifyTypeMult: "",
    classifyTypeValue: "",
    keyword: "",
  },
  list: [
    { type: "slot", value: "addUser", label: "新增" },
    { type: "slot", value: "btnDelete", label: "删除" },
    {
      type: "input",
      label: "故障编号",
      clearable: true,
      value: "faultLibraryNoLike",
      event: search,
    },
    {
      type: "select-model",
      code: "repair_type_enum",
      label: "报修类型",
      clearable: true,
      value: "repairTypeMult",
      event: search,
    },
    {
      type: "slot",
      label: "资产分类",
      clearable: true,
      value: "classifyTypeValue",
      event: search,
    },
    {
      type: "select-model",
      code: "not_asset_repair_type",
      label: "维修类别",
      clearable: true,
      value: "notAssetRepairTypeMult",
      event: search,
    },
    {
      type: "input",
      label: "关键字搜索",
      clearable: true,
      value: "keyword",
      event: search,
    },
    { type: "button", label: "搜索", event: search },
  ],
});
const canNotAddUser = ref(true);
// 故障弹窗相关
const tableDialogInfo = ref({
  title: {
    create: "添加故障",
    update: "修改故障",
  },
  visible: false,
  type: "",
  width: "40%",
  btLoading: false,
  btList: [
    {
      label: "关闭",
      type: "",
      icon: "",
      event: closeUserDialog,
      show: true,
    },
    {
      label: "保存",
      type: "primary",
      icon: "",
      event: saveUser,
      saveLoading: false,
      show: true,
    },
  ],
});

// 故障表单相关
const tableDialogForm = ref({
  ref: null,
  data: {},
  fieldList: [
    {
      label: "报修类型",
      value: "repairType",
      type: "select-model",
      code: "repair_type_enum",
      required: true,
    },
    {
      label: "资产分类",
      value: "classifyTypeValue",
      type: "slot",
      required: true,
    },
    {
      label: "维修类别",
      value: "notAssetRepairType",
      type: "select-model",
      code: "not_asset_repair_type",
      required: true,
    },
    {
      label: "状态",
      value: "status",
      type: "radio-model",
      code: "new_enabled_type",
    },
    {
      label: "故障描述",
      value: "faultDescribe",
      type: "textarea",
      required: true,
      maxlength: 500,
    },
    {
      label: "故障原因",
      value: "faultReason",
      type: "textarea",
      maxlength: 500,
    },
    {
      label: "维修方案",
      value: "maintenanceScheme",
      type: "textarea",
      maxlength: 500,
    },
  ],
  rules: {
    repairType: [
      { required: true, message: "请选择故障类型", trigger: "change" },
    ],
    classifyTypeValue: [
      { required: true, message: "请选择资产分类", trigger: "change" },
    ],
    notAssetRepairType: [
      { required: true, message: "请选择维修类别", trigger: "change" },
    ],
    status: [
      { required: true, message: "请选择状态", trigger: "change" },
    ],
    faultDescribe: [
      { required: true, message: "请输入故障描述", trigger: "blur" },
    ],
  },
  labelWidth: "150px",
});
const currentDeptId = ref(0);
const addOrUpdate = ref("");
const UserBox = ref(true);
const showDeptSubmitBox = ref(false);

// 表格相关
const tableInfo = ref({
  selections: [],
  refresh: 1,
  initCurpage: 1,
  data: [],
  api: getFaultLibraryPage,
  fieldList: [
    { label: "故障分类", value: "faultClassifyName" },
    { label: "故障编号", value: "faultLibraryNo" },
    { label: "报修类型", value: "repairTypeName" },
    { label: "资产分类", value: "classifyTypeValue" },
    { label: "维修类别", value: "notAssetRepairTypeValue" },
    { label: "故障描述", value: "faultDescribe" },
    { label: "故障原因", value: "faultReason" },
    { label: "维修方案", value: "maintenanceScheme" },
    { label: "状态", value: "statusValue" },
    { label: "引用次数", value: "useTimes" },
  ],
  handle: {
    fixed: "right",
    label: "操作",
    width: "100",
    btList: [
      {
        label: "修改",
        event: editUser,
        show: proxy.$permission("faultLibraryManager:update"),
      },
      {
        label: '启用',
        event: enableOrdis,
        show: true,
        ifRender: function (row) {
          return row.status === 0
        },
      },
      {
        label: '停用',
        event: enableOrdis,
        show: true,
        ifRender: function (row) {
          return row.status === 1
        },
      },
      {
        label: "删除",
        event: del,
        show: proxy.$permission("faultLibraryManager:del"),
      },
    ],
  },
});

const addOrUpdateType = ref("");
const treeModifyInfo = ref({
  visible: false,
  title: "新增故障分类",
  width: "40%",
  btLoading: false,
  btList: [
    {
      label: "关闭",
      type: "",
      icon: "",
      event: closeModifyDept,
      show: true,
    },
    {
      label: "保存",
      type: "primary",
      icon: "",
      event: updateOrg,
      saveLoading: false,
      show: true,
    },
  ],
});
const showDialog = ref(undefined);

const canDelete = computed(() => {
  return (
    treeInfo.value.selectNode.children &&
    treeInfo.value.selectNode.children.length === 0
  );
});

watch(
  () => filterInfo.value.query.repairTypeMult,
  (val) => {
    filterInfo.value.query.classifyTypeValue =
      val == 1 ? filterInfo.value.query.classifyTypeValue : "";
    filterInfo.value.query.notAssetRepairTypeMult =
      val == 2 ? filterInfo.value.query.notAssetRepairTypeMult : "";
    filterInfo.value.list.map((item) => {
      if (item.value == "classifyTypeValue") {
        item.show = val == 1;
      }
      if (item.value == "notAssetRepairTypeMult") {
        item.show = val == 2;
      }
    });
  }
);

watch(
  () => tableDialogForm.value.data.repairType,
  (val) => {
    // 1资产报修  2 非资产报修
    tableDialogForm.value.fieldList.map((item) => {
      if (item.value == "classifyTypeValue") {
        item.show = val == 1;
        item.required = val == 1;
      }
      if (item.value == "notAssetRepairType") {
        item.show = val == 2;
        item.required = val == 2;
      }
    });
    for (const key in tableDialogForm.value.rules) {
      if (Object.hasOwnProperty.call(tableDialogForm.value.rules, key)) {
        if (key == "classifyTypeValue") {
          tableDialogForm.value.rules[key][0].required = val == 1;
        }
        if (key == "notAssetRepairType") {
          tableDialogForm.value.rules[key][0].required = val == 2;
        }
      }
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
onMounted(() => {
  init();
});

function openAssetClassifyWindow() {
  if (tableDialogForm.value.data.repairType == "1") {
    selectAssetClassifyInfo.visible = true;
  }
}
function openAssetClassifyWindowFilter() {
  selectAssetClassifyInfoFilter.visible = true;
  // if (tableDialogForm.value.data.repairType == "1") {
  // }
}

function selectAssetClassifyInfoCallBack(row) {
  if (row) {
    tableDialogForm.value.data["classifyType"] = row.id;
    tableDialogForm.value.data["classifyTypeValue"] = row.name;
  } else {
    tableDialogForm.value.data["classifyType"] = -2;
    tableDialogForm.value.data["classifyTypeValue"] = "";
  }
}
function selectAssetClassifyInfoCallBackFilter(row) {
  if (row) {
    filterInfo.value.query["classifyTypeMult"] = row.id;
    filterInfo.value.query["classifyTypeValue"] = row.name;
  } else {
    filterInfo.value.query["classifyTypeMult"] = -2;
    filterInfo.value.query["classifyTypeValue"] = "";
  }
  tableInfo.value.refresh = Math.random();
}

// 触发事件
function handleEvent(event, data) {
  switch (event) {
    // 对表格获取到的数据做处理
    case "tableCheck":
      tableInfo.value.selections = data;
      break;
  }
}
function del(row) {
  if (row && row.id) {
    proxy
      .$confirm("删除后将改变数据,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        remove([row.id]);
      });
  } else {
    proxy
      .$confirm("删除后将改变数据,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        let ids = tableInfo.value.selections.map((row) => row.id);
        remove(ids);
      });
  }
}
function remove(ids) {
  deleteSettingsFaultLibrary(ids).then((resp) => {
    if (resp && resp.success) {
      loadTableList(currentDeptId.value);
    }
  });
}
//人员停用或者启用
function enableOrdis(row) {
  row.status = row.status == 1 ? 0 : 1;
  updateSettingsFaultLibrary(row).then((resp) => {
    if (resp && resp.success) {
      showDialog.value = false;
      if (resp && resp.success) {
        loadTableList(currentDeptId.value);
      }
    } else {
      loadTableList(currentDeptId.value);
    }
  });
}
// 加载组织架构
function init(params) {
  console.info(params);
  getFaultClassifyTree(treeInfo.value.query).then((res) => {
    if (res.success) {
      treeInfo.value.data = res.data;
      if (treeInfo.value.query.keyword) {
        showDeptSubmitBox.value = false;
        UserBox.value = false;
      }
      if (params && params.repairType) {
        getTreeItem(res.data, params);
      } else if (params && params.id) {
        getTreeItem(res.data, params);
      }
    }
  });
}
function getTreeItem(data, param) {
  data.forEach((item) => {
    if (item.children && item.children.length) {
      getTreeItem(item.children, param);
    }
    if (item.id.toString() === param.repairType) {
      handleNodeClick(item);
      return;
    } else if (item.id === param.id) {
      handleNodeClick(item);
      proxy.$nextTick(function () {
        proxy.$refs.menuTree.setCurrentKey(item.id);
      });
      return;
    }
  });
}

//添加类别
function addOrg() {
  addOrUpdate.value = addSettingsFaultClassify;
  addOrUpdateType.value = "createDeptWithPrimaryKey";
  formOrgInfo.value.modifyData = {};
  let parent = proxy.$refs.menuTree.getCurrentNode();
  formOrgInfo.value.modifyData = {
    pid: parent.id,
    ownAllProduct: "1",
    status: 1,
    isCreateDepotTemp: true,
  };
  treeModifyInfo.value.visible = true;
}
function closeModifyDept() {
  treeModifyInfo.value.visible = false;
}
//删除类别
function delDept() {
  const ids = [currentDeptId.value];
  deleteSettingsFaultClassify(ids).then((resp) => {
    if (resp && resp.success) {
      init();
      loadTableList();
    }
  });
}

// 关闭故障弹窗
function closeUserDialog() {
  tableDialogInfo.value.visible = false;
}
// 加载当前类别下故障列表
function loadTableList(id) {
  filterInfo.value.query.faultClassifyId = id <= 0 ? "" : id;
  proxy.$nextTick(function () {
    tableInfo.value.refresh = Math.random();
  });
}
// 点击树节点
function handleNodeClick(node) {
  filterInfo.value.query = {
    classifyTypeMult: "",
    classifyTypeValue: "",
  }
  filterInfo.value.query.keyword = ''
  
  addBtn.value = false;
  addOrUpdate.value = updateSettingsFaultClassify;
  addOrUpdateType.value = "updateDept";
  treeInfo.value.selectNode = node;
  currentDeptId.value = node.id;
  if (node.id !== -1) {
    saveBtn.value = false;
    // 获取类别信息和类别内人员列表
    getOrgDetail(node);
    UserBox.value = true;
    showDeptSubmitBox.value = true;
    loadTableList(node.id);
  } else {
    formOrgInfo.value.data = {};
    showDeptSubmitBox.value = false;
    saveBtn.value = true;
    UserBox.value = true;
    loadTableList();
  }
  
}
function getOrgDetail(node) {
  getSettingsFaultClassify(node.id).then((res) => {
    formOrgInfo.value.data = {
      ...res.data,
    };
  });
}
// 新增故障或编辑
function addUser() {
  tableDialogInfo.value.type = "create";
  tableDialogInfo.value.visible = true;
  tableDialogForm.value.data = {};
}
function editUser(data) {
  tableDialogInfo.value.visible = true;
  tableDialogInfo.value.type = "update";
  tableDialogForm.value.data = data;
  currentDeptId.value = data.faultClassifyId;
}
function saveUser() {
  tableDialogForm.value.ref.validate((valid) => {
    console.log(tableDialogForm);
    if (valid) {
      let api;
      const params = tableDialogForm.value.data;
      const type = tableDialogInfo.value.type;
      if (type === "create") {
        api = addSettingsFaultLibrary;
      } else if (type === "update") {
        api = updateSettingsFaultLibrary;
      } else {
        return;
      }
      params.faultClassifyId = currentDeptId.value;
      api(params).then((res) => {
        if (res.success) {
          tableDialogInfo.value.visible = false;
          tableInfo.value.refresh = Math.random();
          tableDialogForm.value.data = {};
        }
      });
    }
  });
}
function search() {
  const _tableInfo = tableInfo.value;
  _tableInfo.initCurpage = Math.random();
  _tableInfo.refresh = Math.random();
}

// 更新或添加类别
function updateOrg() {
  let _formOrgInfo = formOrgInfo.value;
  formOrgInfo.value.ref.validate((valid) => {
    if (valid) {
      let params = {};
      if (addOrUpdateType.value === "createDeptWithPrimaryKey") {
        params = _formOrgInfo.modifyData;
      } else {
        params = _formOrgInfo.data;
      }
      // params.isCreateDepot = params.isCreateDepotTemp ? 1 : 0;
      addOrUpdate.value(params).then((res) => {
        if (res.success) {
          let param = {};
          //新增故障分类时 需要insert成功后的类别id  将id传给类别资源的新增方法中使用
          if (addOrUpdate.value.name == "createDeptWithPrimaryKey") {
            param.id = res.data;
          } else {
            param.id = formOrgInfo.value.data.id;
          }
          if (_formOrgInfo.data.status === 1) {
            canNotAddUser.value = false;
          } else {
            canNotAddUser.value = true;
          }
          closeModifyDept();
          init(param);
          proxy.$message({
            message: `操作成功`,
            type: "success",
            duration: 1500,
            showClose: true,
          });
        }
      });
    }
  });
}

function beforeUpload() {
  //发生请求时打开加载动画
  uploadInfo.value.loading = ElLoading.service({
    fullscreen: true,
    background: "rgba(255,255,255,.4)",
  });
  return true;
}
function uploadSuccess(resp) {
  uploadInfo.value.loading.close();
  if (resp && resp.success) {
    proxy.$message.success({
      duration: 3000,
      showClose: true,
      message: resp.msg,
    });
    init();
    loadTableList();
  } else {
    proxy.$message.error({
      message: resp.msg,
      duration: 3000,
      showClose: true,
    });
  }
}
function uploadError(err) {
  if (err) {
    proxy.$message.error({
      message: "系统错误",
      duration: 3000,
      showClose: true,
    });
  }
  uploadInfo.value.loading.close();
}

function downloadTemplate(tag) {
  exportTemplateExcel(tag).then((res) => {
    if (res) {
      proxy.$fn.parseExcel(res);
    }
  });
}
function exportClassificationExcel() {
  excelFaultClassify(filterInfo.value.query).then((resp) => {
    if (resp) {
      proxy.$fn.parseExcel(resp);
    }
  });
}
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 83px);
}
.left-container {
  min-width: 320px;
  .left-container-header {
    display: flex;
    align-items: center;
    //justify-content: space-around;
  }
}
.main-flex {
  flex-grow: 1;
  display: flex;
  flex-wrap: nowrap;
  height: calc(100% - 240px);
  .el-tree {
    width: 100%;
    padding: 0 20px 20px;
    overflow-y: auto;
    :deep(.el-tree-node__children) {
      overflow: initial;
    }
  }
}
.img-wraper {
  width: 100px;
  height: 50px;
  img {
    max-width: 100%;
    max-height: 100%;
  }
}
.showImage {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  .image {
    max-width: 40px !important;
    max-height: 40px !important;
  }
}
:deep(.full) {
  width: 100% !important;
}
</style>
